<template>
    <div>
        <cli-title-customer></cli-title-customer>
        <el-container style="height:100%">
            <el-container style="height:100%">
                <el-main>
                    <div class="main">
                        <div style="height: 400px">
                            <div class="slide">
                                <el-carousel height="400px">
                                    <el-carousel-item>
                                        <el-image
                                                :src="imageURL+proInfo.pic1"
                                                :fit="fit">
                                        </el-image>
                                    </el-carousel-item>
                                    <el-carousel-item>
                                        <el-image
                                                :src="imageURL+proInfo.pic2"
                                                :fit="fit">
                                        </el-image>
                                    </el-carousel-item>
                                </el-carousel>
                            </div>
                            <div class="rightPart">
                                <div class="buy">
                                    <el-card class="buyCard" shadow="hover">
                                        <el-form  ref="proForm" :label-position="labelPosition">
                                            <el-form-item prop="sname" style="margin-top: 10px;margin-bottom: 0px">
                                                <span  style="font-size: 30px">{{proInfo.productName}}</span>
                                            </el-form-item>
                                            <el-form-item prop="sname" style="margin-top: 10px;margin-bottom: 0px">
                                                <span  style="font-size: 20px"><img src="../../../../assets/image/storeIcon.png">{{proInfo.storeName}}</span>
                                            </el-form-item>
                                            <el-form-item prop="price" style="margin-top: 10px;margin-bottom: 0px">
                                                <div style="height: 100px;">
                                                    <span>单价：</span><span  style="margin-top:20px;font-size: 30px;color: #dd3d44">{{proInfo.unitprice+'￥'}}</span>
                                                </div>
                                            </el-form-item>
                                            <el-form-item prop="num" style="margin-top: 0px;margin-bottom: 0px">
                                                <el-input-number v-model="count" :step="1" @change="handleChange" :min="1" :max="100" label="描述文字"></el-input-number>
                                            </el-form-item>
                                            <el-form-item style="margin-top: 20px">
                                                <el-row>
                                                    <el-col>
                                                        <el-button @click="carForm()" class="carBtn"
                                                                   onmouseover="this.style.backgroundColor='transparent';this.style.color='#494949'"
                                                                   onmouseout="this.style.backgroundColor='#ff7a88';this.style.color='#fff'"
                                                                   round >加入购物车</el-button>
                                                        <el-button @click="buyForm()" class="buyBtn"
                                                                   onmouseover="this.style.backgroundColor='#ff7a88';this.style.color='#fff'"
                                                                   onmouseout="this.style.backgroundColor='transparent';this.style.color='#494949'"
                                                                   round >立即购买</el-button>
                                                    </el-col>
                                                </el-row>
                                            </el-form-item>
                                        </el-form>
                                    </el-card>
                                </div>
                                <div class="guide">
                                    <el-tabs v-model="activeName" @tab-click="handleClick" :tab-position="tabPosition" style="height: 130px">
                                        <el-tab-pane label=" " name="first"></el-tab-pane>
                                        <el-tab-pane label="产品评价" name="second"></el-tab-pane>
                                        <el-tab-pane label="联系客服" name="third"></el-tab-pane>
                                    </el-tabs>
                                </div>
                                <!--评论抽屉-->
                                <el-drawer
                                        title="商品评论"
                                        :visible.sync="drawer"
                                        size="50%">
                                    <div style="overflow-y:auto;height: 95%">
                                        <el-card v-for="(item,i) in procomment" :key="i" shadow="hover" style="margin-top: 2%">
                                            <div style="float: left">
                                                <div style="float: left">
                                                    <img style="margin-top: 2%" src="../../../../assets/image/icon.png">
                                                </div>
                                                <div style="float: right">
                                                    <h3>{{item.customername}}</h3>
                                                </div>
                                            </div>
                                            <div style="margin-top: 8%">
                                                <el-divider content-position="center">
                                                </el-divider>
                                            </div>
                                            <span style="font-size: 20px">{{item.procomment}}</span>
                                        </el-card>
                                    </div>
                                </el-drawer>
                            </div>
                        </div>
                        <div style="margin-top: 5%;margin-bottom: 5%">
                            <el-divider content-position="center">
                                <div style="float: top;margin-left: 30%">
                                    <img src="../../../../assets/image/icon.png">
                                </div>
                                <div style="float: bottom">
                                    <h2 style="color:rgb(22, 22, 22)">产品详情</h2>
                                </div>
                            </el-divider>
                        </div>
                        <div style="width: 100%;padding: 0 100px 0 100px">
                            <span v-html="proInfo.productIntroduction">{{proInfo.productIntroduction}}</span>
                        </div>
                    </div>
                </el-main>
            </el-container>
        </el-container>
    </div>

</template>

<script>
    import POST from "../../../../api/POST";
    import Cookie from "js-cookie";
    import API_PRO from "../../../../api/API_PRO";
    import CliTitleCustomer from "../../../../components/base/cliTitleCustomer";
    export default {
        name: "_proId",
        components: {CliTitleCustomer},
        data(){
            return{
                imageURL:API_PRO.imageURL,
                fit:'scale-down',
                storeNo:'',
                count:0,
                productNo:'',
                proInfo:{},

            }
        },
        mounted() {
            this.storeNo = this.$route.params.storeId;
            this.productNo = this.$route.params.proId;
            console.log(this.storeNo,this.productNo);
            this.getDetail();
        },
        methods:{
            getDetail(){
                let data = {
                    token:Cookie.get('token'),
                    saleraccount:this.storeNo,
                    productno:this.productNo
                }
                POST.uniproduct(data).then(res=>{
                    res.forEach(item=>{
                        this.proInfo = item;
                    })

                })

            },
            carForm(){
                let  data = {
                    token:Cookie.get('token'),
                    quantity:this.count,
                    saleraccount: this.storeNo,
                    productno: this.productNo
                }
                POST.insertShoppingCar(data).then(res=>{
                    if(res.code==200){
                        this.$message({
                            message:res.message,
                            type:'success'
                        })
                    }
                })
            },
            buyForm(){
                let  data = {
                    token:Cookie.get('token'),
                    quantity:this.count,
                    saleraccount: this.storeNo,
                    productno: this.productNo,
                    uniprice:this.proInfo.unitprice
                }
                POST.directBuy(data).then(res=>{
                    if(res.code==200){
                        this.$message({
                            message:res.message,
                            type:'success'
                        })
                    }else if(res.code == 201){
                        this.$message({
                            message:res.message,
                            type:'success'
                        })
                    }
                })
            },

        }
    }
</script>

<style scoped>
    .header-wrapper {
        width: 100%;
        height: 20%;
        background-color: rgb(22, 22, 22);
        position: fixed;
        overflow-y: hidden;
        z-index: 3;
    }
    .logo {
        float: left;
        margin-top: 5px;
    }
    .logoText {
        float: left;
        margin-top: 10px;
    }
    .main {
        width: 100%;
        position: absolute;
        right: 0;
        left: 0;
        top: 65px;
        margin: auto;
    }
    .slide {
        float: left;
        margin-left: 12%;
        margin-top: 1%;
        width: 30%;
    }
    .rightPart {
        float: right;
        margin-top: 1%;
        width: 55%;
    }
    .buy {
        float: left;
        /*margin-right: 22%;*/
        width: 60%;
    }
    .guide {
        float: right;
        margin-right: 2%;
        width: 30%;
    }
    .el-carousel__item h3 {
        color: #475669;
        font-size: 18px;
        opacity: 0.75;
        line-height: 500px;
        margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }
    .carBtn {
        width: 40%;
        border-radius: 20px;
        margin-bottom: 0px;
        background-color: #ff7a88;
        color: #ffffff;
        border:solid 2px #ff7a88;
    }
    .buyBtn{
        width: 40%;
        border-radius: 20px;
        margin-bottom: 0px;
        background-color: transparent;
        border:solid 2px #ff7a88;
    }
    .el-drawer__body{
        height: 0;
    }
    .buyCard{
        padding: 20px;
    }

</style>
